<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>HTTP服务器</title>
	<link rel="preconnect" href="https://fonts.proxy.ustclug.org">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.proxy.ustclug.org/css2?family=Droid+Sans+Mono&display=swap" rel="stylesheet">
	<style>
		div.cli-root {
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			display: flex;
			flex-direction: column;
			flex-wrap: nowrap;
			font-family: 'Droid Sans Mono', monospace;
		}

		div.cli-root pre.layout {
			flex: 1 1 auto;
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			overflow: auto;
			font-family: 'Droid Sans Mono', monospace;
		}

		div.cli-root div.layout {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
		}

		div.cli-root div.layout input {
			flex: 1 1 auto;
		}
	</style>
</head>
<body>
<div class="cli-root">
	<pre class="layout" id="cli_output"></pre>
	<div class="layout">
		<input id="cli_input"/>
		<button id="cli_send">发送</button>
	</div>
</div>
<script>
	(function () {
		var client = null
		var data = null
		var ac = true
		var input_zone = document.getElementById('cli_input')
		var output_zone = document.getElementById('cli_output')
		output_zone.innerText += '键入HELP获取帮助信息\n'

		function startClient(url) {
			if (client) return
			if (location.protocol === 'https:') {
				client = new WebSocket('wss://' + location.host + '/' + url)
			} else {
				client = new WebSocket('ws://' + location.host + '/' + url)
			}
			client.onopen = function () {
				output_zone.innerText += '连接成功\n'
			}
			client.onclose = function () {
				output_zone.innerText += '连接关闭\n'
				client = null
			}
			client.onerror = function (event) {
				output_zone.innerText += '出现错误：\n' + JSON.stringify(event) + '\n'
			}
			client.onmessage = function (event) {
				data = event.data
				data = JSON.parse(data)
				if (ac) {
					output_zone.innerText = data[''] + '\n'
				} else {
					output_zone.innerText += data[''] + '\n'
				}
			}
		}

		function inputProcess() {
			var cmd = input_zone.value.toUpperCase().trim()
			if (cmd === 'HELP') {
				output_zone.innerText += '以下命令不区分大小写：\n'
				output_zone.innerText += 'CONN <数字> —— 连接到指定场次\n'
				output_zone.innerText += 'CLOSE —— 断开连接\n'
				output_zone.innerText += 'AC —— 开启自动清屏\n'
				output_zone.innerText += 'NOAC —— 关闭自动清屏\n'
				output_zone.innerText += 'CLS —— 手动清屏\n'
				output_zone.innerText += 'LOAD —— 加载数据，只有在连接断开或者没有获取到数据时使用\n'
				output_zone.innerText += 'HISTORY —— 显示历史\n'
				output_zone.innerText += 'CUR —— 显示当前棋手\n'
				output_zone.innerText += 'LAST —— 显示上一步\n'
				output_zone.innerText += 'CLEAN —— 清盘重来\n'
				output_zone.innerText += '??00 —— 下子指令\n'
				output_zone.innerText += '    第一个字符：B黑W白\n'
				output_zone.innerText += '    第二个字符：列号，从A到O\n'
				output_zone.innerText += '    第三四个字符：行号，从01到15，0不能省略\n'
				input_zone.value = ''
			} else if (cmd.startsWith('CONN ')) {
				startClient(cmd.substr(5))
				input_zone.value = ''
			} else if (cmd === 'CLOSE') {
				if (client) {
					client.close()
				}
				input_zone.value = ''
			} else if (cmd === 'AC') {
				ac = true
				output_zone.innerText += '自动清屏：开\n'
				input_zone.value = ''
			} else if (cmd === 'NOAC') {
				ac = false
				output_zone.innerText += '自动清屏：关\n'
				input_zone.value = ''
			} else if (cmd === 'CLS') {
				output_zone.innerText = ''
				input_zone.value = ''
			} else if (cmd === 'HISTORY') {
				if (data) {
					output_zone.innerText += data['history'] + '\n'
				}
				input_zone.value = ''
			} else if (cmd === 'RESULT') {
				if (data) {
					output_zone.innerText += data['result'] + '\n'
				}
				input_zone.value = ''
			} else if (cmd === 'CUR') {
				if (data) {
					output_zone.innerText += data['current'] + '\n'
				}
				input_zone.value = ''
			} else if (cmd === 'LAST') {
				if (data) {
					output_zone.innerText += data['last'] + '\n'
				}
				input_zone.value = ''
			} else {
				if (client) {
					client.send('ws://#' + cmd)
				}
				input_zone.value = ''
			}
		}

		document.getElementById('cli_input').onkeydown = function (event) {
			if (event.keyCode === 13) {
				inputProcess()
			}
		}
		document.getElementById('cli_send').onclick = function () {
			inputProcess()
		}
	})()
</script>
</body>
</html>
